<template>
  <view>
    <up-navbar
        title="添加建议反馈"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        auto-back
        bgColor="#FDE52F">
    </up-navbar>
    <view class="top">
      建议类型
      <text style="color: crimson">*</text>
      <view class="itemContent">
        <view class="itemType" :class="currentIndex === index?'item_bg':'item_bg1'" v-for="(item,index) in listType"
              :key="index" @click="chooseType(index)">
          {{ item }}
        </view>
      </view>
    </view>
    <view class="content1">
      建议描述
      <text style="color: crimson">*</text>
      <view style="margin-top: 30rpx"></view>
      <up-textarea v-model="formData.content" placeholder="请输入内容" count maxlength="200"
                   border="none"></up-textarea>
    </view>
    <view class="content2">
      上传图片
      <text style="color: crimson">*</text>
      <view style="margin-top: 30rpx"></view>
      <view style="display: flex;flex-wrap: wrap;">
        <view class="img_item" v-for="(item, index) in images" :key="index+item">
          <image :src="item"
                 style="width: 120rpx;height: 188rpx;border-radius: 10rpx;border: #EEEEEE solid 1px;background-color: #F9F9F9"
                 @click="selectImg" mode="aspectFit"></image>
        </view>
        <view class="img_item">
          <!-- #ifdef H5 || MP-->
          <view class="add img_item" v-if="images.length < 5 "
                @click="chooseImages">
            <text style="margin: auto;">+</text>
          </view>
          <!--#endif-->
          <!-- #ifdef APP-PLUS -->
          <view class="add img_item" v-if="images.length < 5 "
                @click="getPermission">
            <text style="margin: auto;">+</text>
          </view>
          <!--#endif-->
        </view>
      </view>
    </view>
    <view class="content3">
      <view>
        联系电话
        <text style="color: crimson">*</text>
      </view>
      <view class="input_content">
        <up-input v-model="formData.phone" placeholder="请输入手机号" count maxlength="200" border="none"
                  :placeholderStyle="{fontsize:'29rpx',color: '#bbbbbb'}"></up-input>
      </view>
    </view>
    <view class="content3" v-if="currentIndex===0 || currentIndex===1 || currentIndex===2 || currentIndex===4">
      <view>
        选择订单
        <text style="color: crimson">*</text>
      </view>
      <view class="input_content">
        <text v-if="!order_no" style="color: #bbbbbb;font-size: 29rpx">{{ order_no || '请选择点单号' }}</text>
        <text v-else style="color: #666666;font-size: 29rpx">{{ order_no || '请选择点单号' }}</text>
      </view>
      <view>
        <button :hairline="false" class="up-button" size="mini" @click="toChooseOrder">
          <text style="font-size: 24rpx;padding: 10rpx;color: #000000">选择</text>
        </button>
      </view>
    </view>
    <view class="circle_btn"  @click="toFeedbackList">
      <view style="margin: auto">
        <view style="margin: auto">我的</view>
        <view style="margin: auto">反馈</view>
      </view>
    </view>
    <view style="height: 80rpx"></view>
    <button class="submit up-button" :customStyle="{marginTop: '20px',color: 'black'}" size="large" @click="submitFeedBack">
      提交建议反馈
    </button>
<!--    <view class="bottom">-->
<!--      -->
<!--      <view style="background-color: #FFFFFF">-->
<!--        <up-safe-bottom></up-safe-bottom>-->
<!--      </view>-->
<!--    </view>-->
    <view style="height: 200rpx"></view>
  </view>
</template>

<script setup>
import {useAddFeedback} from "./use_add_feedback";

const {
  listType,
  images,
  currentIndex,
  order_no,
  formData,
  chooseType,
  toChooseOrder,
  toFeedbackList,
  chooseImages,
  submitFeedBack,
  getPermission
} = useAddFeedback()

</script>
<style lang="scss">
page {
  background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.up-button{
  background-color: #fbe32f;
  border-radius: 60rpx;
}
.up-button:after{
  border: none;
}
.submit{
  margin: 0 30rpx;
}
.top, .content1, .content2, .content3 {
  background-color: #FFFFFF;
  padding: 30rpx;
  margin-bottom: 20rpx;
  font-size: 30rpx;
}

.circle_btn{
  width: 90rpx;
  height: 90rpx;
  background-color: #FDE52F;
  position: fixed;
  bottom: 580rpx;
  right: 20rpx;
  border-radius: 100rpx;
  font-size: 20rpx;
  display: flex;
  text-align: center;
  align-items: center;
  box-shadow: #B1B1B1 2px 2px 8px;
}

.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
}

.itemContent {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;

  .itemType {
    background-color: #F6F6F6;
    border-radius: 10rpx;
    padding: 20rpx 52rpx;
    margin-top: 20rpx;
    margin-right: 26rpx;
    color: #666666;
    font-size: 26rpx;
  }

  .itemType:nth-of-type(3n) {
    margin-right: 0;
  }

  .item_bg {
    background-color: #FDE52F;
    color: black;
  }

  .item_bg1 {
    background-color: #F6F6F6;
  }
}

.content3 {
  display: flex;
  align-items: center;

  .input_content {
    margin-left: 20rpx;
    flex: 1;
  }
}

.img_item {
  margin-right: 14rpx;

  .img_item:nth-of-type(5n) {
    margin-right: 0;
  }

  .add {
    width: 120rpx;
    height: 188rpx;
    background-color: #F6F6F6;
    font-size: 88rpx;
    font-weight: lighter;
    display: flex;
    align-items: center;
    color: #999999;
  }
}
</style>
